<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://xmlns.jcp.org/jsf/core">
    <h:head>
        <title>Calendar</title>
    </h:head>
    <h:body onload="#{calendarBean.init()}">
        <h:form id="headerbar" style="width: 100%">
            <p:panelGrid columns="6" style="margin: 0 auto;">
                <p:column>
                    <h:outputText value="Welcome, #{calendarBean.loggedUser.name}!"/>
                </p:column>
                <p:column>
                    <p:commandLink  value="MeteoCal" action="calendar" ajax="false" />
                </p:column>
                <p:column>
                    <p:outputLabel for="email" value="Search User by Email:"/>
                    <p:inputText id="email" value="#{calendarBean.calendarOwner.email}"/>
                    <p:commandButton value="Search" action="#{calendarBean.search(calendarBean.calendarOwner.email)}" ajax="false"/>
                </p:column>
                <p:column>
                    <p:commandButton  value="Check Inbox (#{inbox.getInboxSize()})" action="viewinbox" ajax="false" />
                </p:column>
                <p:column>
                    <p:commandButton value="Account settings" type="button" onclick="PF('dialog').show();" />
                    <p:dialog header="Modal Dialog" widgetVar="dialog" modal="true">
                        <h:outputText value="Choose your calendar's privacy:" />
                        <p:commandButton value="Public" icon="ui-icon-check" action="#{userBean.setPublic()}" ajax="false"/>
                        <p:commandButton value="Private"  icon="ui-icon-close" action="#{userBean.setPrivate()}" ajax="false"/>
                    </p:dialog>                
                </p:column>
                <p:column>
                    <p:commandButton action="#{loginBean.logout()}" value="logout"/>
                </p:column>
            </p:panelGrid>
        </h:form>
        <h:form style="margin: 0 auto; width: 90%">
            <h:outputText value="Welcome to #{calendarBean.calendarOwner.name}'s caledar" style="font-size:1.5em; margin: 0 auto"/>
            <p:schedule id="schedule" value="#{calendarBean.model}"  draggable="false" resizable="true" view="month" rightHeaderTemplate="null" timeZone="GMT+1" widgetVar="myschedule" >
                <p:ajax event="dateSelect" listener="#{calendarBean.onDateSelect}" disabled="#{calendarBean.notOwner}" update="eventDetails" oncomplete="PF('eventDialog').show();" />
                <p:ajax event="eventSelect" listener="#{calendarBean.onEventSelect}" update="eventDetails" oncomplete="PF('eventDialog').show();"/>
            </p:schedule>
            <p:dialog styleClass="dialog" widgetVar="eventDialog" header="Event Info" showEffect="clip" hideEffect="clip" dynamic="true" height="550">
                <p:tabView id="eventDetails">
                    <p:tab title="Details">
                        <h:panelGrid id="eventgrid">
                            <p:row>
                                <h:outputLabel for="title" value="Title:" />
                                <h:inputText id="title" value="#{calendarBean.scheduleEvent.title}" readonly="#{calendarBean.notOrganizer}" required="true" requiredMessage="Title required">
                                    <f:validateLength minimum="1"/>
                                </h:inputText>
                                <p:message id="titlemsg" for="title"/>
                            </p:row>
                            <p:row>
                                <h:outputLabel for="description" value="Description:" />
                                <h:inputTextarea id="description" value="#{calendarBean.scheduleEvent.description}" readonly="#{calendarBean.notOrganizer}"/>
                            </p:row>
                            <p:row>
                                <h:outputLabel for="from" value="From:" />
                                <p:calendar id="from" value="#{calendarBean.scheduleEvent.startDate}" mindate="#{calendarBean.today}" pattern="yyyy-MM-dd HH:mm" readonly="#{calendarBean.notOrganizer}">
                                    <f:convertDateTime pattern="yyyy-MM-dd HH:mm" timeZone="GMT+1"/>
                                    <p:ajax event="dateSelect" update="to"/>
                                </p:calendar>
                            </p:row>
                            <p:row>
                                <h:outputLabel for="to" value="To:" />
                                <p:calendar id="to" value="#{calendarBean.scheduleEvent.endDate}" mindate="#{calendarBean.scheduleEvent.startDate}" pattern="yyyy-MM-dd HH:mm" readonly="#{calendarBean.notOrganizer}">
                                    <f:convertDateTime pattern="yyyy-MM-dd HH:mm" timeZone="GMT+1"/>
                                </p:calendar>
                            </p:row>
                            <p:row>
                                <h:outputLabel for="outdoor" value="Outdoor/Indoor:" />
                                <p:selectOneRadio id="outdoor" value="#{calendarBean.scheduleEvent.outdoor}" disabled="#{calendarBean.notOrganizer}">
                                    <f:selectItem itemLabel="outdoor" itemValue="#{true}"/>
                                    <f:selectItem itemLabel="indoor" itemValue="#{false}"/>
                                </p:selectOneRadio>
                            </p:row>
                            <p:row>
                                <h:outputLabel for="privacy" value="Privacy:" />
                                <p:selectOneRadio id="privacy" value="#{calendarBean.scheduleEvent.privacy}" disabled="#{calendarBean.notOrganizer}">
                                    <f:selectItem itemLabel="public" itemValue="#{false}"/>
                                    <f:selectItem itemLabel="private" itemValue="#{true}"/>
                                </p:selectOneRadio>
                            </p:row>
                            <p:row>
                                <h:outputLabel for="city" value="City:" />
                                <h:inputText id="city" value="#{calendarBean.scheduleEvent.city}" readonly="#{calendarBean.notOrganizer}" required="true" requiredMessage="City required" >
                                    <f:validateLength minimum="1"/>
                                </h:inputText>
                                <p:message id="citymsg" for="city"/>
                            </p:row>
                            <p:row>
                                <h:outputLabel for="address" value="Address:" />
                                <h:inputText id="address" value="#{calendarBean.scheduleEvent.address}" readonly="#{calendarBean.notOrganizer}"/>
                            </p:row>
                            <p:row>
                                <p:dataTable var="user" value="#{invitationBean.invitationlist}" selection="#{calendarBean.scheduleEvent.participationlist}" rowKey="#{user.email}" disabledSelection="#{calendarBean.notOrganizer}" paginator="true" rows="3" style="width:500px; height: 220px">
                                    <f:facet name="header">
                                        Invitation List
                                    </f:facet>
                                    <p:column selectionMode="multiple" style="width:16px; text-align:center" />
                                    <p:column headerText="Email">
                                        <h:outputText value="#{user.email}" />
                                    </p:column>
                                    <p:column headerText="Name">
                                        <h:outputText value="#{user.name}" />
                                    </p:column>
                                </p:dataTable>
                            </p:row>
                            <p:row>
                                <p:commandButton value="Save" actionListener="#{calendarBean.addEvent}"
                                                 oncomplete="if (args &amp;&amp; !args.validationFailed)PF('myschedule').update();if (args &amp;&amp; !args.validationFailed)PF('eventDialog').hide();" disabled="#{calendarBean.notOrganizer}" update="eventgrid" process="@all"/>
                                <p:commandButton value="Delete" actionListener="#{calendarBean.deleteEvent}"
                                                 oncomplete="PF('myschedule').update();PF('eventDialog').hide();" disabled="#{calendarBean.notOrganizer}"/>
                            </p:row>
                        </h:panelGrid>
                        <h:messages  style="color: red"/>
                    </p:tab>
                    <p:tab title="Forecast" disabled="#{calendarBean.disableForecast}">
                        <p:commandButton value="Get Weather Info" update="forecastlist" action="#{weatherManager.getWeather(calendarBean.scheduleEvent.eventId)}"/>
                        <p:dataTable id="forecastlist" var="forecast"  value="#{weatherManager.weatherDataList}">
                            <p:column headerText="City">
                                <h:outputText value="#{forecast.city}"/>
                            </p:column>
                            <p:column headerText="Date">
                                <h:outputText value="#{forecast.date}"/>
                            </p:column>
                            <p:column headerText="Description">
                                <h:outputText value="#{forecast.weather}"/>
                            </p:column>
                            <p:column headerText="Temperature">
                                <h:outputText value="#{forecast.temp}"/>
                            </p:column>
                        </p:dataTable>
                    </p:tab>
                </p:tabView>
            </p:dialog>
        </h:form>
        <style type="text/css">
            .value {
                width: 1000px;
            }
            .fc-today{
                background-color: #FAFAFA;
            }
            .ui-widget input{
                margin-left: 1em;
            }
            .ui-widget textarea{
                margin-left: 1em;
            }
            .dialog{
                margin: 0 auto !important;
                width: 50% !important;
            }
        </style>
    </h:body>
</html>
